<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-08-03 07:47:26
 * @LastEditors: cxguo
 * @LastEditTime: 2020-08-03 13:11:24
-->
<template>
  <div>
    <chart ref="chart" />
  </div>
</template>

<script>
import chart from './chart'
import moment from 'moment'
import { listDataGroupByDay } from '@/api/charts/sale.js'
import { getLast7DaysRange } from '@/libs/date.js'

export default {
  name: 'SimpleSaleReport',
  components: { chart },
  created() {},
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.initChartData()
    },
    initChartData() {
      const params = getLast7DaysRange()
      listDataGroupByDay(params).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          const reportData = this.saleData2reportData(params, data)
          this.initChart(reportData)
        }
      })
    },
    saleData2reportData(dateRange, saleData) {
      const { beginTime } = dateRange
      const dates = []
      const amounts = []
      const billCounts = []
      for (let i = 0; i < 7; i++) {
        const day = moment(beginTime).add(i, 'days').format('MM-DD')
        dates.push(day)
        const saleObj = saleData.find(item => { return item.time === day })
        if (saleObj) {
          amounts.push(saleObj.amountPayable)
          billCounts.push(saleObj.billCount)
        } else {
          amounts.push(0)
          billCounts.push(0)
        }
      }
      return { dates, amounts, billCounts }
    },
    initChart({ dates, amounts, billCounts }) {
      const xData = dates
      const series = [
        { name: '销售额', data: amounts },
        { name: '销售笔数', data: billCounts }
      ]
      this.$refs.chart.initChart({ xData, series })
    }
  }
}
</script>

<style>

</style>
